// ======================= 定义查询参数 =======================

let laypage = layui.laypage;
let form = layui.form;
//axios.get('url',{params:参数})
// /发请求，由于参数多，每次都要带上所以放到对象里方便复用
const query = {
    pagenum: 1, // 是	int	页码值
    pagesize: 2, // 是	int	每页显示多少条数据
    cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
    state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
};
// ======================= 文章了表 =======================
getArtlist()
function getArtlist() {
    axios.get("/my/article/list", { params: query })
        .then(({ data: { data, total } }) => {
            console.log(data)
            const newStr = data.map(({ title, pub_date, state, cate_name, Id }) => {
                return `
            <tr>
               <td>${title}</td>
               <td>${cate_name}</td>
               <td>${pub_date}</td>
               <td>${state}</td>
               <td>
                 <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
                 <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
               </td>
             </tr>
            `
            }).join('')

            $("#list").html(newStr)

            getArtlaypage(total)
        })
}


// 下拉框
axios.get("/my/article/cates")
    .then(({ data: { data } }) => {
        console.log(data)
        let newAll = data.map((item) => {
            return `
            <option value="${item.Id}">${item.name}</option>
           `
        }).join('')
        $("#cateSelect").append(newAll)

        // 当option创建添加到下拉框之后，手动更新form表单全部内容
        form.render('select');
    })

// 筛选
$('#form').on('submit', function (e) {
    e.preventDefault()


    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()


    console.log(query);

    getArtlist()
})



// 分页功能

function getArtlaypage(tatol) {
    //执行一个laypage实例
    laypage.render({
        elem: 'page-box' //注意，这里的 test1 是 ID，不用加 # 号
        , count: tatol, //数据总数，从服务端得到,
        limit: query.pagesize, // 每页条数，从query对象中可以获取到
        curr: query.pagenum, // 起始页，从query对象中可以获取到
        limits: [1, 2, 3, 5, 8, 10],
        layout: ["count", "limit", "prev", "page", "next", "skip"],

        jump: function (obj, first) {
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 点击分页，需要加载对应分页的数据
            // 1. 修改query对象的pagenum页码值为当前页
            // 2. 发送ajax请求获取到数据

            // // 1.
            query.pagenum = obj.curr;

            // // 修改pagesize的值(每页显示的条数)
            query.pagesize = obj.limit;

            // // 发送ajax请求获取数据
            // getList();

            // jump 回调函数的触发时机
            // 第一种情况. laypage.render 初始化渲染分页的时候就会触发一次  参数first 为 true
            // 第二种情况. 点击分页切换的时候，也会触发,  参数first 为 undefined

            // 首次（初始化渲染分页的时候）不执行
            if (!first) {
                // 点击分页才执行
                getArtlist()
            }

        }
    });
}


// 删除功能

$("#list").on('click', ".btn_delete", function () {
    let Id = $(this).attr('data-id')

    layer.confirm('确认删除', { icon: 3, title: '提示' }, function (index) {
        // 点击确认按钮,来发送ajax请求实现删除文章
        axios.get(`/my/article/delete/${Id}`).then((res) => {
            if (res.data.status !== 0) {
                return layer.msg("删除文章失败");
            }



            // 删除文章成功
            layer.msg("删除文章成功");

            // 当前页面中，如果只有一个删除按钮了，页码 - 1，使其展示上一页数据
            // 解决小bug
            if ($(".btn_delete").length === 1) {
                // 页码最小值为1
                query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1;
            }

            // 发送ajax获取最新的数据
            getArtlist()
            layer.close(index);
        });



    });
});


$('#list').on('click', ".btn_edit", function () {
    // 被点击编辑的id
    let id = $(this).attr('data-id')
    console.log(id);
    // 跳转到编辑页面
    location.href = '/article/art_edit.html?id=' + id

})

